<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{
            height:1200px;
            width:1200px;
            border:1px solid red;
            
        }
        *{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
</body>
<script>
    var box=document.getElementById("box");
    for(var i=0;i<100;i++)
    {
        for(var j=0;j<100;j++)
        {
            var b=document.createElement("div");
            b.style.border="1px solid black";
            b.style.width="10px";
            b.style.height="10px";
            b.style.cssFloat="left";
            box.appendChild(b);
            b.style.background="yellow";
           
            if(i%2==0) 
            {
                b.style.background="red";
            }
            if(i==50 && j==50)
            {
                b.style.background="turquoise";
                b.innerHTML="1";
            }
            if(i==99 && j==97)
            {
                b.style.backgroundColor="white";
            }
        }  
    }
    var obox = document.createElement("div");
        obox.innerHTML = "";
        obox.style.border="1px solid black";
        obox.style.width="1200px";
        obox.style.height="10px";
        obox.style.backgroundColor="blue";
        document.body.appendChild(obox);
        

</script>
</html>